<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app"></div>

<script src="vdom.js"></script>
<script src="diff.js"></script>
<script src="patch.js"></script>
<script>
let app = document.getElementById('app')
let olddom = createElement('ul', {id: 'wrapper'}, [
    createElement('li', {id: 'child1'}, ['a']),
    createElement('li', {id: 'child2'}, ['b']),
    createElement('li', {id: 'child3'}, ['c'])
])
let newdom = createElement('ul', {id: 'wrapperzzzz'}, [
    createElement('li', {id: 'child1'}, ['1']),
    createElement('div', {id: 'child2'}, ['2'])
    // createElement('li', {id: 'child3'}, ['3'])
])

//渲染成真实dom
let el = render(olddom)
//将真实dom添加到页面
renderDom(el, app)
//比较新旧虚拟dom，得到补丁包
let patches = diff(olddom, newdom)
console.log(patches)
//给元素打补丁，重新渲染视图
patch(el, patches)

</script>
</body>
</html>